<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.name" class="search-input" clearable placeholder="请输入操作人"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.login_name" class="search-input" clearable placeholder="请输入操作账号"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.ip" class="search-input" clearable placeholder="请输入IP"/>
                </FormItem>
                <FormItem>
                    <DatePicker v-model="statsTime" type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="请选择时间段" style="width: 320px"></DatePicker>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar export custom></vxe-toolbar>
            <vxe-table
                    border
                    resizable
                    :tooltip-config="{theme:'light',enterable:true}"
                    highlight-hover-row
                    height="500"
                    size="medium"
                    show-overflow="tooltip"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData"
                    :checkbox-config="{checkField: 'checked'}">
                <vxe-table-column type="seq" title="#" width="60"></vxe-table-column>
                <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                  v-for="(item,index) in tableColumns" :key="index">
                </vxe-table-column>
                <vxe-table-column field="action" title="操作" width="200">
                    <template v-slot="{row}">
                        <ButtonGroup>
                            <Button type="info" size="small" class="action-btn"
                                    @click="infoAction(row)">查看详情
                            </Button>
                        </ButtonGroup>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
        </Row>
        <br>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType"
                      :dataID="modalDataID" @cancelOption="cancelOption" @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import {
  getWhiteListRecordList
} from '@/api/settings'
import { formatDate } from '@/components/dateFormat'
import OptionModal from './components/option-modal'
export default {
  components: { OptionModal },
  data () {
    return {
      modalShow: false,
      modalTitle: '',
      modalWidth: 500,
      modalType: '',
      modalDataID: '',
      tableColumns: [
        {
          title: '操作人',
          key: 'name',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '操作账号',
          key: 'login_name',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'create_time',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        /* {
          title: '操作表/备注',
          key: 'remarks',
          tooltip: true,
          width: 200,
          align: 'center'
        }, */
        {
          title: 'IP',
          key: 'ip',
          tooltip: true,
          width: 200,
          align: 'center'
        }
      ],
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      },
      tempFlag: false,
      searchObj: {},
      statsTime: ''
    }
  },
  props: {},
  mounted () {
    this.init()
  },
  computed: {},
  methods: {
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      this.modalShow = false
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    initPage () {
      this.pageObj.pageNo = 1
    },
    init (data) {
      const startTime = this.statsTime[0] !== '' ? formatDate(this.statsTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
      const endTime = this.statsTime[1] !== '' ? formatDate(this.statsTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        create_by: this.$common.xeUtils.trim(this.searchObj.create_by),
        ip: this.$common.xeUtils.trim(this.searchObj.ip),
        login_name: this.$common.xeUtils.trim(this.searchObj.login_name),
        name: this.$common.xeUtils.trim(this.searchObj.name),
        startTime: startTime,
        endTime: endTime
      }
      let param = data || obj
      this.tableLoading = true
      getWhiteListRecordList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    infoAction (row) {
      this.modalTitle = '查看详情'
      this.modalType = 'info'
      this.modalWidth = 800
      this.modalDataID = this.$common.xeUtils.clone(row.id)
      this.$refs.optionModal.modelAction()
    },
    searchAction () {
      this.initPage()
      this.init()
    }
  }

}
</script>

<style scoped>
    .container {
        padding-bottom: 50px;
    }

    .action-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .search-input {
        width: 200px;
    }

    .search-btn {
        /*width: 100px;*/
    }

    /deep/ .ivu-divider-horizontal {
        margin: 12px 0;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 6px;
    }
</style>
